<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="map" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    var locations = [{
        name: '上海',
        coord: [121.472644, 31.231706]
    }, {
        name: '北京',
        coord: [116.405285, 39.904989]
    }, {
        name: '广东',
        coord: [113.280637, 23.839463714285714]
    }];
    // 读取geo地图数据
    $.get('../../mapData/map/json/china.json', function (json) {
        echarts.registerMap('china', json); // 注册地图
        // 初始化echarts示例mapChart
        var mapChart = echarts.init(document.getElementById('map'));
        // mapChart的配置
        var option = {
            backgroundColor: '#404a59', // 图表背景色
            title : {
                text: '定位居中',
                subtext:'',
                x:'center',
                textStyle : {
                    color: '#fff'
                }
            },
            tooltip : {
                trigger: 'item',
                /*formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
                }*/
                formatter: '{b}'
            },
            toolbox: {
                show : true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            visualMap: {
                min: 0,
                max: 500,
                splitNumber: 5,
                inRange: {
                    color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            series: [{
                name: '中国',
                type: 'map', // series图表类型
                label: {
                    emphasis: {
                        show: true,
                        color: '#ffffff'
                    }
                },
                roam: true,// 允许缩放
                zoom: 0,// 默认缩放等级
                itemStyle: { // 定义样式
                    normal: {
                        label:{show:true},
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        label:{show:true},
                        areaColor: '#2a333d'
                    }
                },
                mapType: 'china', // 自定义扩展图表类型
                data: [] //业务数据
            }]
        }
        mapChart.setOption(option);
        mapChart.on("click", function(params){
            if(params.name == "上海")
            {
                var series = locate(0);
                mapChart.setOption({series : series});
            }
            else if(params.name == "北京")
            {
                var series = locate(1);
                mapChart.setOption({series : series});
            }
            else if(params.name == "广东")
            {
                var series = locate(2);
                mapChart.setOption({series : series});
            }
        });
 });
function locate(n)
    {
        var series =[{
                    center: locations[n].coord,
                    zoom: 4,
                    data:[
                        {name: locations[n].name, selected: true}
                        ],
                    animationDurationUpdate: 1000,
                    animationEasingUpdate: 'cubicInOut'}];
        return series;
    }
</script>
</html>